accessibility
 Macromedia Logo Upper Navigation Bar
  Help
Lower Navigation Bar
Products Support Designer Developer Downloads Store International Site Map Company
Home > Designer & Developer Center > Dreamweaver MX Application Development Center
Icon or Spacer Macromedia Dreamweaver MX Application Development Center
Drew McLellan
Drew McLellan
Dreamweaver Fever
 
Previous columns
· Writing Secure Dreamweaver MX Applications by Ray West
· Designing a Site with the CSS-P Method (Part 2)
by Adrian Senior
· Designing a Site with the CSS-P Method (Part 1)
by Adrian Senior
  
  Five steps to more professional pages with Dreamweaver MX
 


They say a bad craftsman always blames his tools. And they're right. No matter how good the tool is, it's the skill of the person using it that produces the results.

This article outlines five steps for getting more professional results out of Dreamweaver MX.

Step 1: Export your JavaScript and CSS to external files
Although you may think that keeping all your code in your base page is convenient for editing, it's a big bandwidth-waster. By moving JavaScript and Cascading Style Sheet (CSS) code out of the <head> section of each page and into central files, you accomplish two useful things:

  • You centralize your code. If you must make changes to your code, you only have to do it once instead of once for every page that uses it.
  • You save bandwidth. The client browser only downloads your JavaScript and CSS files once, rather than once per page.

To accomplish this task, first find any JavaScript functions in the <head> of your documents. Here's a typical example:

   
  
<script language="JavaScript" 
type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) 
{ //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>
  Copy any functions into a new text file and save it as something like common.js. Link to it in the <head> section of each page of your site (or put it in your template), as follows:
   
  
<script language="JavaScript" type="text/JavaScript" 
src="/common.js">
</script>
  Find any CSS code in the <head> section of your pages, copy it to a new text file, and save it as something like mystyles.css. Here's what to look for in the <head> section:
   
  
<style type="text/css">
<!--
h1 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   font-weight: bold;
   color: #000000;
}
-->
</style>
 

Link the CSS file to your web page by putting a link to the CSS file in the page's <head> section:

   
  
<link href="/mystyles.css" rel="stylesheet" 
type="text/css" />
 

Step 2: Export your site without template mark-up
Dreamweaver MX uses HTML comments to store meta-data within documents. These comments allow features like templates and library items to work. Although these features are extremely useful while you build your site, these comments can waste bandwidth and give your pages an unprofessional look once your files are on the production website.

Dreamweaver can strip out these comments for you into a new, cleaned-up version of your site. (Don't lose the comments in the version you're working in, however, or else your templates will break.) To do this, choose Modify > Templates > Export Without Markup from within your site. Browse to a new location for your cleaned-up site and click OK.

Step 3: Future-proof your site with XHTML
HTML has reached the end of its life and is no longer being developed as a mark-up language. Its replacement is Extensible HTML (XHTML)—an implementation of XML that works in all browsers, old and new. Even though XHTML is strict XML, its tags and attributes are so similar to HTML that old browsers do not spot the difference. Using XML is advantageous because it's a modern, future-proof standard.

If you code by hand, there are a few things you need to learn about XHTML before you convert your files. For example, the XHTML standard prefers non-empty attributes and correctly paired and nested tags. (Read about the differences between HTML and XHTML in Dan Short's article, "Coding Standards Using XHTML.")

If you work in a visual environment like most users, it's easy to turn your pages into XHTML beauties:

  • If you're starting a new page, be sure to check the Make Document XHTML Compliant option in the bottom corner of the New Document window.
  • If you have an existing page in HTML, convert it to XHTML by choosing File > Convert > XHTML.

Easy as pie.

Step 4: Tidy up your code with the Apply Source Formatting command
With long and complex pages, it soon becomes difficult to find your way around the page in Code view. Any professional programmer can tell you about the importance of well-presented, carefully indented code.

Here are some benefits in keeping your code nicely formatted:

  • You never know who's going to make changes to the code after you're done with it. What if your client comes back for some changes while you're on vacation? Your coworker should be able to pick up your page and understand it.
  • What's clear today will not be clear four months later. Even if you edit your own page in a few months, your familiarity with the code then may not carry over and help you understand your code now. Neat code formatting helps you see what's going on.
  • What if your client gets curious and views the source code on their site? Would you like them to see a big jumbled mess or neat code that looks like every darn tag was lovingly carved from a matchstick? (I'm betting on the latter.)

This doesn't mean that you have to spend ages cleaning up your page before uploading it to the server. Dreamweaver MX makes life easier: Choose Commands > Apply Source Formatting after editing a page, and you're done.

Step 5: Validate your page to find basic errors
You'd be amazed how many professional web developers don't know that there are tools out there to help them fix their code. You can eliminate most browser compatibility problems from your page by simply checking that the code is correct—by running it through a validator. The hardest part about fixing little problems is finding them in the first place. This is where a validator helps.

Dreamweaver MX users have two ways to validate their code. The first way is in Dreamweaver. Ensure that you have saved the page you are working on. Then select File > Check Page. Select either Validate Markup if your page is HTML or Validate as XML if your page is XHTML. The Results panel will pop up with a list of any problems it encounters.

The second way to validate your page is to use the online validation tools of the World Wide Web Consortium (W3C). You can validate all flavors of HTML and XHTML, as well as your CSS files. You can find the validators on the W3C website home page:

It's really quite staggering to see the difference in the page after you fix minor errors. For instance, an improperly nested tag can prevent a page from appearing in one browser yet allow the page to appear fine an another browser. This alone is a great reason to make code validators do the hard work for you.

   
   
  ------------------------------------------------------------------------------
 

About the author
Drew McLellan is the author of Dreamweaver MX Web Development (dreamweaverfever.com/dwd/) from New Riders, as well as an extension writer and all-around Dreamweaver good guy. He runs DreamweaverFever.com, and helps folks out in various support forums as a Team Macromedia volunteer. In the real world he's a feet-on-the-ground web development manager for an agency on the outskirts of London.

 

  
       
©1995-2002 Macromedia, Inc. All rights reserved.
Use of this website signifies your agreement to the Terms of Use.
Privacy | Site Map | Contact us | Accessibility | Report Piracy